<!-- cmx 12.03验证手机号页面 -->
<template>
	<view class="container">
		<view class="phone-form">
			<!-- 手机号码输入框 -->
			<uni-forms ref="formRef" :model="form" :rules="rules">
				<uni-forms-item name="phoneNumber">
					<input type="text" placeholder="请输入手机号码" v-model="form.phoneNumber" />
				</uni-forms-item>
				<!-- 验证码输入框-->
				<uni-forms-item name="verificationCode" class="codewrap">
					<input class="code" type="text" placeholder="请输入验证码" v-model="form.verificationCode" />
					<!-- 获取验证码按钮 -->
					<!-- <button @click="getVerificationCode">获取验证码</button> -->
					<span class="getCode" @click="getVerificationCode">获取验证码</span>
				</uni-forms-item>
			</uni-forms>
		</view>
		<button @click="nextStep">下一步</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const form = ref({}); // 使用ref来存储新的昵称
	const formRef = ref();
	form.value.phoneNumber = 1234567891;

	// 获取验证码的方法
	const getVerificationCode = async () => {
		form.value.verificationCode = '1234';
	}

	const rules = ref({
		verificationCode: {
			rules: [{
				required: true,
				errorMessage: '请输入验证码'
			}]
		}
	})
	const nextStep = async () => {
		const isValid = await formRef.value.validate();
		if (!isValid) {
			console.error('表单验证失败');
			return;
		} else {
			uni.reLaunch({
				url: '/pages/account/check_phone'
			})
		}
	}
</script>

<style>
	.container {
		padding: 20px 0;
	}

	.phone-form {
		margin-top: -15px;
		background-color: white;
		/* margin-bottom: 10px; */
	}

	.getCode {
		  position: relative;
		   font-size: 14px;
		   width: 100px; /* 固定宽度 */
		   height: 30px; /* 固定高度 */
		   padding: 5px;
		   border-radius: 5px;
		   display: flex;
		   justify-content: center;
		   align-items: center;
		   cursor: pointer;
		   margin-top: -40px; /* 调整按钮与输入框的垂直间距 */
		   margin-left: auto; /* 将按钮放置在输入框的右侧 */
	}

	input:nth-of-type(1) {
		padding: 10px;
		margin-top: 10px;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		border-radius: 4px;
	}

	.code {
		border-top: 1px solid #ccc;

	}

	button {
		background-color: #4CAF50;
		color: white;
		border: none;
		cursor: pointer;
		margin-top: 30px;
		margin-left: 10px;
		margin-right: 10px;
	}

	button:hover {
		background-color: #45a049;
	}
</style>